<template>
    <div class="shoe-store">
      <!-- 导航栏：复用主页面样式，默认激活“订单” -->
      <el-menu
        default-active="4"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#1a1a1a"
        text-color="#fff"
        active-text-color="#ff4d4f"
        @select="handleSelect"
        border-bottom="false"
      >
        <div class="logo">
          <span class="brand">鞋城履行</span>
        </div>
        <el-menu-item index="1" @click="$router.push('/main')">首页</el-menu-item>
        <el-menu-item index="2" @click="$router.push('/page/shoe')">鞋类大全</el-menu-item>
        <el-menu-item index="3" @click="$router.push('/page/shoppingcart')">购物车</el-menu-item>
        <el-menu-item index="4" @click="$router.push('/page/orders')">订单</el-menu-item>
        <div class="user-actions">
          <el-icon class="icon" @click="showSearch = !showSearch"><Search /></el-icon>
          <el-icon class="icon"><User/></el-icon>
          <el-icon class="icon"><ShoppingCart /></el-icon>
        </div>
      </el-menu>
  
      <!-- 搜索框：与主页面逻辑一致 -->
      <div v-if="showSearch" class="search-container">
        <el-input 
          placeholder="搜索鞋款、品牌或系列..." 
          v-model="searchQuery"
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </div>
  
      <!-- 页面标题区 -->
      <div class="order-header">
        <div class="container">
          <h1 class="page-title">我的订单</h1>
          <p class="page-desc">查看所有订单状态，管理您的购物订单</p>
        </div>
      </div>
  
      <!-- 订单主体内容 -->
      <section class="order-section">
        <div class="container">
          <!-- 订单筛选区 -->
          <div class="order-filter">
            <el-radio-group v-model="activeStatus" @change="handleStatusChange" class="status-filter">
              <el-radio-button label="all">全部订单</el-radio-button>
              <el-radio-button label="pending">待付款</el-radio-button>
              <el-radio-button label="paid">待发货</el-radio-button>
              <el-radio-button label="shipped">待收货</el-radio-button>
              <el-radio-button label="completed">已完成</el-radio-button>
              <el-radio-button label="cancelled">已取消</el-radio-button>
            </el-radio-group>
            
            <div class="order-search">
              <el-input 
                placeholder="搜索订单号" 
                v-model="orderSearchQuery"
                class="order-search-input"
                @keyup.enter="handleOrderSearch"
              >
                <template #append>
                  <el-button icon="Search" @click="handleOrderSearch"></el-button>
                </template>
              </el-input>
            </div>
          </div>
  
          <!-- 订单为空状态 -->
          <div v-if="filteredOrders.length === 0" class="empty-order">
            <el-empty 
              image="https://cube.elemecdn.com/0/88/03b0d39580dd3e942b60d7f5943jpeg.jpeg"
              description="暂无相关订单"
            >
              <el-button type="primary" @click="$router.push('/page/shoe')">去购物</el-button>
            </el-empty>
          </div>
  
          <!-- 订单列表 -->
          <div v-else class="order-list">
            <div v-for="order in filteredOrders" :key="order.id" class="order-card">
              <!-- 订单头部信息 -->
              <div class="order-header-info">
                <div class="order-number">
                  <span class="label">订单编号：</span>
                  <span class="value">{{ order.orderNo }}</span>
                </div>
                <div class="order-date">
                  <span class="label">下单时间：</span>
                  <span class="value">{{ order.createTime }}</span>
                </div>
                <div class="order-status">
                  <span class="status-label" :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</span>
                </div>
              </div>
  
              <!-- 订单商品列表 -->
              <div class="order-products">
                <div v-for="product in order.products" :key="product.id" class="order-product-item">
                  <img :src="product.imgUrl" alt="商品图片" class="product-img">
                  <div class="product-info">
                    <h3 class="product-name">{{ product.name }}</h3>
                    <p class="product-spec">品牌：{{ product.brand }} | 尺码：{{ product.size }}</p>
                    <p class="product-price">¥{{ product.price }} x {{ product.quantity }}</p>
                  </div>
                </div>
              </div>
  
              <!-- 订单金额信息 -->
              <div class="order-amount">
                <div class="amount-item">
                  <span class="label">商品总价：</span>
                  <span class="value">¥{{ order.productTotal.toFixed(2) }}</span>
                </div>
                <div class="amount-item">
                  <span class="label">运费：</span>
                  <span class="value">{{ order.freight > 0 ? '¥' + order.freight.toFixed(2) : '免运费' }}</span>
                </div>
                <div class="amount-item">
                  <span class="label">优惠：</span>
                  <span class="value">-¥{{ order.discount.toFixed(2) }}</span>
                </div>
                <div class="amount-item total">
                  <span class="label">实付款：</span>
                  <span class="value">¥{{ order.payAmount.toFixed(2) }}</span>
                </div>
              </div>
  
              <!-- 订单操作按钮 -->
              <div class="order-actions">
                <div class="shipping-info" v-if="order.status === 'shipped' || order.status === 'completed'">
                  <span class="label">收货信息：</span>
                  <span class="value">{{ order.receiverName }} {{ order.receiverPhone }} {{ order.receiverAddress }}</span>
                </div>
                
                <div class="action-buttons">
                  <el-button 
                    type="text" 
                    class="detail-btn" 
                    @click="showOrderDetail(order.id)"
                  >
                    订单详情
                  </el-button>
                  
                  <template v-if="order.status === 'pending'">
                    <el-button 
                      type="text" 
                      class="cancel-btn" 
                      @click="cancelOrder(order.id)"
                    >
                      取消订单
                    </el-button>
                    <el-button 
                      type="primary" 
                      class="pay-btn" 
                      @click="payOrder(order.id)"
                    >
                      立即付款
                    </el-button>
                  </template>
                  
                  <template v-if="order.status === 'shipped'">
                    <el-button 
                      type="primary" 
                      class="receive-btn" 
                      @click="confirmReceive(order.id)"
                    >
                      确认收货
                    </el-button>
                  </template>
                  
                  <template v-if="order.status === 'completed'">
                    <el-button 
                      type="text" 
                      class="return-btn" 
                      @click="applyReturn(order.id)"
                    >
                      申请售后
                    </el-button>
                  </template>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 分页 -->
          <div v-if="filteredOrders.length > 0" class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="filteredOrders.length"
            ></el-pagination>
          </div>
        </div>
      </section>
  
      <!-- 订单详情弹窗 -->
      <el-dialog 
        v-model="showDetailDialog" 
        title="订单详情" 
        :width="dialogWidth"
        :before-close="handleDialogClose"
      >
        <div v-if="currentOrder" class="order-detail-content">
          <!-- 订单基本信息 -->
          <div class="detail-section">
            <h3 class="section-title">订单信息</h3>
            <div class="detail-item">
              <span class="detail-label">订单编号：</span>
              <span class="detail-value">{{ currentOrder.orderNo }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">下单时间：</span>
              <span class="detail-value">{{ currentOrder.createTime }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">订单状态：</span>
              <span class="detail-value" :class="getStatusClass(currentOrder.status)">{{ getStatusText(currentOrder.status) }}</span>
            </div>
            <div class="detail-item" v-if="currentOrder.payTime">
              <span class="detail-label">支付时间：</span>
              <span class="detail-value">{{ currentOrder.payTime }}</span>
            </div>
            <div class="detail-item" v-if="currentOrder.shipTime">
              <span class="detail-label">发货时间：</span>
              <span class="detail-value">{{ currentOrder.shipTime }}</span>
            </div>
            <div class="detail-item" v-if="currentOrder.receiveTime">
              <span class="detail-label">确认收货时间：</span>
              <span class="detail-value">{{ currentOrder.receiveTime }}</span>
            </div>
            <div class="detail-item" v-if="currentOrder.cancelTime">
              <span class="detail-label">取消时间：</span>
              <span class="detail-value">{{ currentOrder.cancelTime }}</span>
            </div>
          </div>
  
          <!-- 商品信息 -->
          <div class="detail-section">
            <h3 class="section-title">商品信息</h3>
            <div class="detail-products">
              <div v-for="product in currentOrder.products" :key="product.id" class="detail-product-item">
                <img :src="product.imgUrl" alt="商品图片" class="detail-product-img">
                <div class="detail-product-info">
                  <h4 class="detail-product-name">{{ product.name }}</h4>
                  <p class="detail-product-spec">品牌：{{ product.brand }} | 尺码：{{ product.size }}</p>
                  <div class="detail-product-price">
                    <span>¥{{ product.price }}</span>
                    <span class="quantity">x {{ product.quantity }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 收货信息 -->
          <div class="detail-section">
            <h3 class="section-title">收货信息</h3>
            <div class="detail-item">
              <span class="detail-label">收货人：</span>
              <span class="detail-value">{{ currentOrder.receiverName }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">联系电话：</span>
              <span class="detail-value">{{ currentOrder.receiverPhone }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">收货地址：</span>
              <span class="detail-value">{{ currentOrder.receiverAddress }}</span>
            </div>
          </div>
  
          <!-- 支付信息 -->
          <div class="detail-section">
            <h3 class="section-title">支付信息</h3>
            <div class="detail-item">
              <span class="detail-label">支付方式：</span>
              <span class="detail-value">{{ currentOrder.paymentMethod || '未支付' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">商品总价：</span>
              <span class="detail-value">¥{{ currentOrder.productTotal.toFixed(2) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">运费：</span>
              <span class="detail-value">{{ currentOrder.freight > 0 ? '¥' + currentOrder.freight.toFixed(2) : '免运费' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">优惠：</span>
              <span class="detail-value">-¥{{ currentOrder.discount.toFixed(2) }}</span>
            </div>
            <div class="detail-item total">
              <span class="detail-label">实付款：</span>
              <span class="detail-value">¥{{ currentOrder.payAmount.toFixed(2) }}</span>
            </div>
          </div>
  
          <!-- 物流信息 -->
          <div v-if="currentOrder.logisticsNo" class="detail-section">
            <h3 class="section-title">物流信息</h3>
            <div class="detail-item">
              <span class="detail-label">物流公司：</span>
              <span class="detail-value">{{ currentOrder.logisticsCompany }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">物流单号：</span>
              <span class="detail-value">{{ currentOrder.logisticsNo }}</span>
            </div>
            
            <div class="logistics-timeline">
              <el-timeline>
                <el-timeline-item 
                  v-for="(item, index) in currentOrder.logisticsInfo" 
                  :key="index"
                  :timestamp="item.time"
                  :placement="index === 0 ? 'top' : 'bottom'"
                  :color="index === 0 ? '#ff4d4f' : '#888'"
                >
                  {{ item.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
  
        <template #footer>
          <el-button @click="showDetailDialog = false">关闭</el-button>
        </template>
      </el-dialog>
  
      <!-- 页脚：复用主页面样式 -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-column">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">品牌故事</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>客户服务</h3>
            <ul>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#">售后服务</a></li>
              <li><a href="#">配送信息</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>支付方式</h3>
            <ul>
              <li><a href="#">在线支付</a></li>
              <li><a href="#">货到付款</a></li>
              <li><a href="#">优惠券使用</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>关注我们</h3>
            <div class="social-icons">
            </div>
            <p class="app-download">下载我们的APP</p>
          </div>
        </div>
        <div class="copyright">
          <p>© 2023 KickShop. 保留所有权利</p>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref, computed,  onMounted } from 'vue';
  import { Search, User, ShoppingCart} from '@element-plus/icons-vue';
  import {useUserStore} from "@/stores/user"
  import { selectByUserId } from '@/api/Order';
  
  const userStore=useUserStore()
  
  // 状态管理
  const showSearch = ref(false);
  const searchQuery = ref('');
  const orderSearchQuery = ref('');
  const activeStatus = ref('all');
  const currentPage = ref(1);
  const pageSize = ref(5);
  const showDetailDialog = ref(false);
  const currentOrder = ref(null);
  const dialogWidth = ref('800px');
  const queryPageParam = ref({
  pageNum: 1,
  pageSize: 5, 
  userId:userStore.user.uid
 
});
//根据userId' 查询的分页数据
const dataByUserId=ref({})
  // 订单数据
  const orders = ref([
    {
      id: 1,
      orderNo: 'ORD20230512001',
      createTime: '2023-05-12 14:30:25',
      payTime: '2023-05-12 14:35:10',
      shipTime: '2023-05-13 09:15:30',
      receiveTime: '2023-05-16 18:20:45',
      status: 'completed',
      products: [
        {
          id: 1,
          name: 'LeBron 19 篮球鞋',
          brand: '耐克',
          imgUrl: 'https://picsum.photos/id/1002/400/400',
          price: 1599,
          quantity: 1,
          size: '42'
        }
      ],
      productTotal: 1599,
      freight: 0,
      discount: 100,
      payAmount: 1499,
      receiverName: '张先生',
      receiverPhone: '138****5678',
      receiverAddress: '北京市朝阳区建国路88号 阳光小区3号楼2单元1001室',
      paymentMethod: '微信支付',
      logisticsCompany: '顺丰速运',
      logisticsNo: 'SF1234567890123',
      logisticsInfo: [
        { time: '2023-05-16 18:20:45', content: '已签收，签收人：张先生' },
        { time: '2023-05-16 10:15:30', content: '快递员[李师傅 139****1234]正在为您派送，请保持电话畅通' },
        { time: '2023-05-15 08:30:15', content: '快件已到达[北京朝阳集散中心]' },
        { time: '2023-05-13 14:25:40', content: '快件已发出，前往北京' },
        { time: '2023-05-13 09:15:30', content: '快件已揽收，揽收人：王师傅' }
      ]
    },
    {
      id: 2,
      orderNo: 'ORD20230518002',
      createTime: '2023-05-18 09:45:12',
      payTime: '2023-05-18 09:50:33',
      shipTime: '2023-05-18 16:20:10',
      receiveTime: '',
      status: 'shipped',
      products: [
        {
          id: 7,
          name: 'Dunk Low 板鞋',
          brand: '耐克',
          imgUrl: 'https://picsum.photos/id/1001/400/400',
          price: 799,
          quantity: 2,
          size: '41'
        },
        {
          id: 11,
          name: 'Blazer 休闲鞋',
          brand: '耐克',
          imgUrl: 'https://picsum.photos/id/1006/400/400',
          price: 699,
          quantity: 1,
          size: '43'
        }
      ],
      productTotal: 799 * 2 + 699,
      freight: 0,
      discount: 150,
      payAmount: (799 * 2 + 699) - 150,
      receiverName: '李女士',
      receiverPhone: '139****2345',
      receiverAddress: '上海市浦东新区张江高科技园区博云路2号 博云大厦15层',
      paymentMethod: '支付宝',
      logisticsCompany: '圆通快递',
      logisticsNo: 'YT9876543210123',
      logisticsInfo: [
        { time: '2023-05-19 08:45:20', content: '快递员[张师傅 136****5678]正在为您派送，请保持电话畅通' },
        { time: '2023-05-19 06:10:15', content: '快件已到达[上海浦东集散中心]' },
        { time: '2023-05-18 20:30:40', content: '快件已发出，前往上海' },
        { time: '2023-05-18 16:20:10', content: '快件已揽收，揽收人：刘师傅' }
      ]
    },
    {
      id: 3,
      orderNo: 'ORD20230520003',
      createTime: '2023-05-20 16:10:55',
      payTime: '2023-05-20 16:15:22',
      shipTime: '',
      receiveTime: '',
      status: 'paid',
      products: [
        {
          id: 12,
          name: 'NMD_R1 休闲鞋',
          brand: '阿迪达斯',
          imgUrl: 'https://picsum.photos/id/1070/400/400',
          price: 999,
          quantity: 1,
          size: '42'
        }
      ],
      productTotal: 999,
      freight: 0,
      discount: 50,
      payAmount: 949,
      receiverName: '王先生',
      receiverPhone: '137****6789',
      receiverAddress: '广州市天河区珠江新城冼村路5号 凯华国际中心23层',
      paymentMethod: '支付宝',
      logisticsCompany: '',
      logisticsNo: '',
      logisticsInfo: []
    },
    {
      id: 4,
      orderNo: 'ORD20230521004',
      createTime: '2023-05-21 10:20:30',
      payTime: '',
      shipTime: '',
      receiveTime: '',
      status: 'pending',
      products: [
        {
          id: 3,
          name: '韦德之道 10 篮球鞋',
          brand: '李宁',
          imgUrl: 'https://picsum.photos/id/1025/400/400',
          price: 1099,
          quantity: 1,
          size: '44'
        },
        {
          id: 4,
          name: 'Air Zoom 跑步鞋',
          brand: '耐克',
          imgUrl: 'https://picsum.photos/id/1000/400/400',
          price: 899,
          quantity: 1,
          size: '44'
        }
      ],
      productTotal: 1099 + 899,
      freight: 0,
      discount: 200,
      payAmount: (1099 + 899) - 200,
      receiverName: '赵先生',
      receiverPhone: '136****8901',
      receiverAddress: '深圳市南山区科技园科苑路8号 科技园大厦B座12层',
      paymentMethod: '',
      logisticsCompany: '',
      logisticsNo: '',
      logisticsInfo: []
    },
    {
      id: 5,
      orderNo: 'ORD20230510005',
      createTime: '2023-05-10 11:30:45',
      payTime: '',
      shipTime: '',
      receiveTime: '',
      cancelTime: '2023-05-10 11:45:12',
      status: 'cancelled',
      products: [
        {
          id: 8,
          name: 'Chuck 70 经典板鞋',
          brand: '匡威',
          imgUrl: 'https://picsum.photos/id/1040/400/400',
          price: 599,
          quantity: 1,
          size: '40'
        }
      ],
      productTotal: 599,
      freight: 0,
      discount: 0,
      payAmount: 599,
      receiverName: '陈女士',
      receiverPhone: '135****9012',
      receiverAddress: '杭州市西湖区文三路9号 东部软件园5号楼',
      paymentMethod: '',
      logisticsCompany: '',
      logisticsNo: '',
      logisticsInfo: []
    }
  ]);
  
  // 计算属性：筛选后的订单
  const filteredOrders = computed(() => {
    return orders.value.filter(order => {
      // 状态筛选
      if (activeStatus.value !== 'all' && order.status !== activeStatus.value) {
        return false;
      }
      // 订单号搜索
      if (orderSearchQuery.value && !order.orderNo.includes(orderSearchQuery.value)) {
        return false;
      }
      return true;
    });
  });
  
  // 计算属性：分页后的订单
  const paginatedOrders = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    return filteredOrders.value.slice(startIndex, startIndex + pageSize.value);
  });
  
  // 监听窗口尺寸，调整弹窗宽度
  const handleResize = () => {
    if (window.innerWidth < 768) {
      dialogWidth.value = '90%';
    } else {
      dialogWidth.value = '800px';
    }
  };
  
  // 初始化
  onMounted(() => {
    console.log("订单页面获取 user。id")
     console.log("订单页面获取 user。id",userStore.user.uid)
    selectByUserId(queryPageParam.value.userId)
    handleResize();
    window.addEventListener('resize', handleResize);
  });
  
  // 清理
  const handleDialogClose = () => {
    currentOrder.value = null;
  };
  
  // 方法：获取订单状态文本
  const getStatusText = (status) => {
    const statusMap = {
      'pending': '待付款',
      'paid': '待发货',
      'shipped': '待收货',
      'completed': '已完成',
      'cancelled': '已取消'
    };
    return statusMap[status] || '未知状态';
  };
  
  // 方法：获取订单状态样式类
  const getStatusClass = (status) => {
    const classMap = {
      'pending': 'status-pending',
      'paid': 'status-paid',
      'shipped': 'status-shipped',
      'completed': 'status-completed',
      'cancelled': 'status-cancelled'
    };
    return classMap[status] || '';
  };
  
  // 方法：状态筛选变化
  const handleStatusChange = () => {
    currentPage.value = 1; // 重置到第一页
  };
  
  // 方法：订单搜索
  const handleOrderSearch = () => {
    currentPage.value = 1; // 重置到第一页
  };
  
  // 方法：分页相关
  const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    // 滚动到页面顶部
    window.scrollTo({ top: 200, behavior: 'smooth' });
  };
  
  // 方法：显示订单详情
  const showOrderDetail = (id) => {
    const order = orders.value.find(item => item.id === id);
    if (order) {
      currentOrder.value = { ...order };
      showDetailDialog.value = true;
    }
  };
  
  // 方法：取消订单
  const cancelOrder = (id) => {
    ElMessageBox.confirm(
      '确定要取消此订单吗？',
      '取消订单',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      const order = orders.value.find(item => item.id === id);
      if (order && order.status === 'pending') {
        order.status = 'cancelled';
        order.cancelTime = new Date().toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit', 
          second: '2-digit' 
        }).replace(',', '');
        ElMessage.success('订单已取消');
      }
    }).catch(() => {
      // 取消操作
    });
  };
  
  // 方法：支付订单
  const payOrder = (id) => {
    const order = orders.value.find(item => item.id === id);
    if (order && order.status === 'pending') {
      // 模拟支付弹窗
      ElMessageBox.confirm(
        `订单金额：¥${order.payAmount.toFixed(2)}，确认支付？`,
        '订单支付',
        {
          confirmButtonText: '确认支付',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).then(() => {
        order.status = 'paid';
        order.payTime = new Date().toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit', 
          second: '2-digit' 
        }).replace(',', '');
        order.paymentMethod = '微信支付';
        ElMessage.success('支付成功');
      }).catch(() => {
        // 取消支付
      });
    }
  };
  
  // 方法：确认收货
  const confirmReceive = (id) => {
    ElMessageBox.confirm(
      '请确认您已收到商品，确认收货后订单将完成。',
      '确认收货',
      {
        confirmButtonText: '确认收货',
        cancelButtonText: '取消',
        type: 'info'
      }
    ).then(() => {
      const order = orders.value.find(item => item.id === id);
      if (order && order.status === 'shipped') {
        order.status = 'completed';
        order.receiveTime = new Date().toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit', 
          hour: '2-digit', 
          minute: '2-digit', 
          second: '2-digit' 
        }).replace(',', '');
        ElMessage.success('已确认收货');
      }
    }).catch(() => {
      // 取消操作
    });
  };
  
  // 方法：申请售后
  const applyReturn = (id) => {
    ElMessage.info('售后申请功能开发中，敬请期待');
  };
  
  // 方法：全局搜索
  const handleSearch = () => {
    console.log('搜索:', searchQuery.value);
    // 实现搜索逻辑
  };
  
  // 方法：菜单选择
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
  </script>
  
  <style scoped>
  /* 基础样式复用主页面 */
  .shoe-store {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
  }
  
  /* 导航栏样式完全复用主页面 */
  .el-menu-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .logo {
    font-size: 26px;
    font-weight: 700;
    margin-right: 40px;
    background: linear-gradient(45deg, #ff4d4f, #ff7875);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .el-menu-item {
    position: relative;
    transition: color 0.3s;
  }
  .el-menu-item:hover {
    color: #ff4d4f !important;
  }
  .el-menu-item::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: #ff4d4f;
    transition: transform 0.3s ease;
  }
  .el-menu-item:hover::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .user-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .icon {
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.3s, color 0.3s;
  }
  .icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  
  /* 搜索框样式复用主页面 */
  .search-container {
    padding: 15px 50px;
    background-color: #1a1a1a;
  }
  .search-input {
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 页面标题区样式 */
  .order-header {
    background-color: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
  }
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .page-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #ff4d4f;
    margin: 15px auto 0;
  }
  .page-desc {
    font-size: 16px;
    color: #666;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* 订单主体样式 */
  .order-section {
    padding: 40px 0;
  }
  
  /* 订单筛选区 */
  .order-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
  }
  .status-filter {
    background-color: #fff;
    padding: 5px;
    border-radius: 4px;
  }
  .el-radio-button__inner {
    border-radius: 4px;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
  }
  .order-search {
    min-width: 300px;
  }
  .order-search-input {
    width: 100%;
  }
  
  /* 空订单样式 */
  .empty-order {
    background-color: #fff;
    border-radius: 8px;
    padding: 60px 0;
    text-align: center;
  }
  
  /* 订单列表样式 */
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .order-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .order-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }
  
  /* 订单头部信息 */
  .order-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 10px;
  }
  .order-number, .order-date {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .order-number .label, .order-date .label {
    color: #999;
    margin-right: 5px;
  }
  .order-number .value, .order-date .value {
    color: #333;
  }
  .order-status {
    display: flex;
    align-items: center;
  }
  .status-label {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
  }
  .status-pending {
    background-color: #faad14;
  }
  .status-paid {
    background-color: #1890ff;
  }
  .status-shipped {
    background-color: #722ed1;
  }
  .status-completed {
    background-color: #52c41a;
  }
  .status-cancelled {
    background-color: #8c8c8c;
  }
  
  /* 订单商品列表 */
  .order-products {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
  }
  .order-product-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .order-product-item:last-child {
    margin-bottom: 0;
  }
  .product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
    transition: transform 0.3s;
  }
  .order-product-item:hover .product-img {
    transform: scale(1.05);
  }
  .product-info {
    flex: 1;
  }
  .product-name {
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
  }
  .product-spec {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
  }
  .product-price {
    font-size: 14px;
    color: #ff4d4f;
  }
  
  /* 订单金额信息 */
  .order-amount {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .amount-item {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .amount-item .label {
    color: #999;
    margin-right: 10px;
    min-width: 80px;
    text-align: right;
  }
  .amount-item .value {
    color: #333;
  }
  .amount-item.total {
    margin-top: 5px;
  }
  .amount-item.total .label {
    font-weight: 500;
    color: #666;
  }
  .amount-item.total .value {
    font-size: 16px;
    color: #ff4d4f;
    font-weight: 700;
  }
  
  /* 订单操作按钮 */
  .order-actions {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
  }
  .shipping-info {
    font-size: 14px;
    flex: 1;
    min-width: 300px;
  }
  .shipping-info .label {
    color: #999;
    margin-right: 5px;
  }
  .shipping-info .value {
    color: #333;
  }
  .action-buttons {
    display: flex;
    gap: 10px;
  }
  .detail-btn {
    color: #666;
  }
  .detail-btn:hover {
    color: #ff4d4f !important;
  }
  .cancel-btn {
    color: #666;
  }
  .cancel-btn:hover {
    color: #f5222d !important;
  }
  .pay-btn, .receive-btn {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
  }
  .pay-btn:hover, .receive-btn:hover {
    background-color: #f53f3f;
    border-color: #f53f3f;
  }
  .return-btn {
    color: #666;
  }
  .return-btn:hover {
    color: #1890ff !important;
  }
  
  /* 分页样式 */
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
  
  /* 订单详情弹窗样式 */
  .order-detail-content {
    padding: 10px 0;
  }
  .detail-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
  }
  .detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .section-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 3px solid #ff4d4f;
  }
  .detail-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
  }
  .detail-item:last-child {
    margin-bottom: 0;
  }
  .detail-label {
    width: 100px;
    color: #999;
    flex-shrink: 0;
  }
  .detail-value {
    flex: 1;
    color: #333;
  }
  .detail-value.status-pending {
    color: #faad14;
  }
  .detail-value.status-paid {
    color: #1890ff;
  }
  .detail-value.status-shipped {
    color: #722ed1;
  }
  .detail-value.status-completed {
    color: #52c41a;
  }
  .detail-value.status-cancelled {
    color: #8c8c8c;
  }
  
  /* 详情中的商品列表 */
  .detail-products {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .detail-product-item {
    display: flex;
    align-items: center;
  }
  .detail-product-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
  }
  .detail-product-info {
    flex: 1;
  }
  .detail-product-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
  }
  .detail-product-spec {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
  }
  .detail-product-price {
    font-size: 13px;
    color: #ff4d4f;
  }
  .detail-product-price .quantity {
    color: #666;
    margin-left: 5px;
  }
  .detail-item.total .detail-value {
    color: #ff4d4f;
    font-weight: 700;
  }
  
  /* 物流时间线 */
  .logistics-timeline {
    margin-top: 15px;
    padding-left: 20px;
  }
  .el-timeline-item__timestamp {
    font-size: 12px;
    color: #999;
  }
  
  /* 页脚样式完全复用主页面 */
  .footer {
    background: linear-gradient(to right, #1a1a1a, #141414);
    color: white;
    padding: 50px;
    margin-top: 60px;
  }
  .footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
  }
  .footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #ff4d4f;
  }
  .footer-column ul {
    list-style: none;
    padding: 0;
  }
  .footer-column ul li {
    margin-bottom: 10px;
  }
  .footer-column a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
  }
  .footer-column a:hover {
    color: #ff4d4f;
    text-decoration: underline;
  }
  .social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }
  .social-icon {
    font-size: 24px;
    color: #999;
    transition: color 0.3s, transform 0.3s;
    cursor: pointer;
  }
  .social-icon:hover {
    color: #ff4d4f;
    transform: scale(1.2);
  }
  .app-download {
    color: #999;
    font-size: 14px;
  }
  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #999;
    font-size: 14px;
  }
  
  /* 响应式调整 */
  @media (max-width: 992px) {
    .footer-content {
      grid-template-columns: repeat(2, 1fr);
    }
    .order-filter {
      flex-direction: column;
      align-items: flex-start;
    }
    .order-search {
      width: 100%;
      min-width: auto;
    }
  }
  
  @media (max-width: 768px) {
    .el-menu-demo {
      padding: 0 20px;
    }
    .order-header-info {
      flex-direction: column;
      align-items: flex-start;
    }
    .order-status {
      align-self: flex-end;
      margin-top: -28px;
    }
    .order-actions {
      flex-direction: column;
      align-items: flex-start;
    }
    .shipping-info {
      min-width: auto;
      width: 100%;
    }
    .action-buttons {
      width: 100%;
      justify-content: space-between;
    }
    .detail-item {
      flex-direction: column;
    }
    .detail-label {
      width: auto;
      margin-bottom: 5px;
    }
  }
  
  @media (max-width: 576px) {
    .footer-content {
      grid-template-columns: 1fr;
    }
    .page-title {
      font-size: 28px;
    }
    .status-filter {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 10px;
    }
    .el-radio-group {
      width: max-content;
    }
    .action-buttons {
      flex-wrap: wrap;
    }
    .product-name {
      font-size: 14px;
    }
    .section-title {
      font-size: 15px;
    }
  }
  </style>
  